<template>
	<div class="login-wrap">
        <!-- 导航栏 -->
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <!-- <a class="navbar-brand" href=""><span class="logo"><img src="https://www.landleap.com/njkydimages/image/logo.png"></span></a> <span class="hdtxt">奋斗者AI爱招聘</span> -->
                     <span>AI爱招聘</span>
                </div>
                <div class="usr_rt">
                    
                    <a href="" class="btn btn-default" target="_blank" >公告</a> <a @click="toRegister" class="btn btn-primary">注册</a>
                </div>
                <!-- usr_rt -->
            </div>
        </div>

        
        <!-- banner and login-->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- banner -->
            <div>
             
                <div class="carousel-inner" role="listbox">
                 
                    <div class="item active">
                        <img class="third-slide" src="../../assets/njkydimages/image/banner-img2.jpg" alt="Third slide">
                    </div>
                </div>
            </div>
            <!-- banner /end -->

            <!-- 登录 -->
            <div class="signinWrap">
                <form class="form-signin">
                    <i class="iconfont icon-erweimadenglu" v-if="loginCode==1" @click="loginCode=2"></i>
                    <i class="iconfont icon-yanzhengmadenglu" v-if="loginCode==2" @click="loginCode=1"></i>
                    <h2 class="form-signin-heading" v-if="loginCode==1">手机号码登录</h2>
                    <h2 class="form-signin-heading" v-if="loginCode==2">微信扫码登录</h2>
                    <p class="info-error hide">
                        <span class="glyphicon glyphicon-exclamation-sign"></span>
                    </p>
                    <template v-if="loginCode==1">
                        <div class="form-group">
                            <label class="sr-only">手机号</label>
                            <div class="input-group">
                                <span class="input-group-addon user"></span> <input id="UserID" type="text" class="form-control" placeholder="请填写手机号" v-model="phone" data-options="required:true,validType:[&#39;email&#39;]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon password"></span> <input id="UserPWD" v-model="code" class="form-control" style="width: 120px;" placeholder="验证码" >
                                <div class="send_btn" @click="showLoginCode=true;onRefresh()" v-loading="loading" v-if="time==0">
                                    <span>发送验证码</span>
                                </div>
                                <div class="send_btn_next" v-if="time>0">
                                    <span>{{time}}秒</span>
                                </div>
                            </div>

                           
                        </div>

                       

                    </template>
                    <template v-if="loginCode==2">
                        <div class="code_div">
                            <canvas ref="qrCodeCanvas" width="400" height="400"></canvas>
                        </div>
                    </template>
                   
                    

                    <!-- <div class="btn_list">
                        <div class="btn_div" :class="{select_div:loginType==2}" @click="setActive(2)">
                            <span>我要找工作</span>
                        </div>
                        <div class="btn_div" :class="{select_div:loginType==1}"@click="setActive(1)">
                            <span>我要招人</span>
                        </div>
                    </div> -->

                    <!-- <div class="form-group">
                        <label class="sr-only">验证码</label>
                        <div class="input-group">
                            <span class="input-group-addon yzm"></span> <input type="text" id="picvalidate" class="form-control" style="width: 110px;" placeholder="验证码" maxlength="4">
                            <span class="yzmpic"><img src="https://www.landleap.com/GetPicValidate" onclick="ReflashPic()" style="cursor: pointer;"></span>
                        </div>
                    </div> -->

                    <div class="checkbox" v-if="loginCode==1">
                       
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="button" @click="Login()" v-if="loginCode==1">登录系统</button>
                   
                </form>
            </div>


                <!-- /.signinWrap -->

        </div>
        
        <div class="ban_1" style="margin-top: 60px;">
		<div class="container">
		
			
			<div class="ban_1-item">
				<div class="ban_1-inner">
					<div class="ban_1-inner-lt">
						<img class="img-circle" src="../../assets/njkydimages/image/img-p1.png" alt="">
						<h2>我是求职者</h2>
					</div>

					<div class="ban_1-inner-rt">
						直面内心，<br> 以最真实的自己面对企业<br> 以自己的职业素养、态度、意识、能力来打动企业
					</div>
				</div>
			</div>
			
			<div class="ban_1-item">
				<div class="ban_1-inner">
					<div class="ban_1-inner-lt">
						<img class="img-circle" src="../../assets/njkydimages/image/img-p2.png" alt="">
						<h2>我是推荐者</h2>
					</div>


					<div class="ban_1-inner-rt">
						专业、专心、专注<br> 在企业与候选人之间，绝不变造、伪造、隐瞒任何重要信息
					</div>
				</div>
			</div>
			
			<div class="ban_1-item">
				<div class="ban_1-inner">
					<div class="ban_1-inner-lt">
						<img class="img-circle" src="../../assets/njkydimages/image/img-p3.png" alt="">
						<h2>我是企业</h2>
					</div>

					<div class="ban_1-inner-rt">
						求贤若渴<br> 礼贤下士<br> 得天下英才而用之
					</div>
				</div>
			</div>
			
		</div>
	</div>
    	<!-- 页面主体 -->
	<div class="lpmain_wrap">


       



<!-- /.ban_4 -->


<div class="ban_5">
    <div class="container">
        <h2 class="featurette-heading">合作单位</h2>
        <ul class="cooper">
            <li class="cooper-item"><img src="../../assets/njkydimages/image/coo-p1.png"></li>
            <li class="cooper-item"><img src="../../assets/njkydimages/image/coo-p2.png"></li>
            <li class="cooper-item"><img src="../../assets/njkydimages/image/coo-p3.png"></li>
            <li class="cooper-item"><img src="../../assets/njkydimages/image/coo-p4.png"></li>
        </ul>
    </div>
</div>
<!-- /.ban_5 -->

</div>
<!-- /.lpmain_wrap -->

<div class="muban_dialog"  v-show="showLoginCode">

</div>


<div class="box_slide_verify"   v-show="showLoginCode">
    <div class="bsv_head">
        <span>请拖动滑块完成拼图</span>
        <i class="el-icon-circle-close" @click="showLoginCode=false"></i>
    </div>
    <div class="boxsv_div">
        <slide-verify
          
            ref="slideverify"
            :l="42"
            :r="10"
            :w="390"
            :h="200"
            :imgs="imgs"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh">
        </slide-verify>

        <div class="verify" :class="{isError:!successSlide}" v-if="isVerify"> {{ successSlide ? '验证成功' : '验证失败' }}</div>
    </div>
        
</div>


<div class="muban_dialog"  v-show="showSelectUser">

</div>

<div class="box_slide_verify"   v-show="showSelectUser" style="width: 400px;height: 350px;">
    <div class="bsv_head" style="border-bottom: 0px;">
        <span>请选择登录的角色</span>
        <i class="el-icon-circle-close" @click="showSelectUser=false"></i>
    </div>
    <div class="rolelist">
        <template v-for="item in roleList">
            <div class="role_div" @click="selectRole(item)" :class="{select_role_div:item.id==selectForm.id}">
                <div class="rd_left">
                    <div class="rd_img" v-if="item.logo">
                        <img v-if="item.logo" :src="'https://www.aizhaopin.pro/prod-api/sys/common/static/'+ item.logo">
                       
                    </div>
                    <div class="rd_img" v-else>
                        <img :src="userImg">
                    </div>
                    <div class="rd_name">
                        <span>{{item.name}}</span>
                        <el-tag type="" effect="dark" size="small"  v-if="item.type==1" style="margin-left: 5px;">
                            {{ item.typeDescription }}
                        </el-tag>
                        <el-tag type="warning" effect="dark" size="small"  v-if="item.type==2" style="margin-left: 5px;">
                            {{ item.typeDescription }}
                        </el-tag>
                    </div>
                </div>
                <div class="rd_right">
                    <i class="el-icon-success" v-if="item.id==selectForm.id"></i>
                </div>
                
            </div>
        </template>
       
      
    </div>
    <div class="role_bottom">
        <div class="roled_btn" @click="sureLogin">
            <span>确认</span>
        </div>
    </div>
        
</div>


<!-- main-footer -->
<div class="main-footer">
<div class="container">
    <div class="m_f_lt">
        <div class="widget">
            <h4 class="widget-title">简介</h4>
            <div class="widget-content widget_links">
                <!-- <a href="">兰普易聘简介</a> <a href="">介产品服务</a> -->
            </div>
        </div>
        <!-- /.widget -->

        <div class="widget">
            <h4 class="widget-title">共赢</h4>
            <div class="widget-content widget_links">
                <!-- <a href="">兰普易聘简介</a> <a href="">介产品服务</a> -->
            </div>
        </div>
        <!-- /.widget -->
    </div>

    <div class="m_f_rt barcode">
        <!-- <div class="barcode"> -->
        <div class="barcode-img">
            <img src="@/assets/imgs/weixin_cde.jpg">
        </div>
        <div class="barcode-text">扫二维码，关注微信公众号</div>
        <!-- </div> -->
    </div>
</div>
</div>
<!-- /.main-footer -->


<!-- footer -->
<div class="footer">
<div class="container">
<p class="text-muted">
    Copyright © 兰普人力资源（南京）有限公司<span>|</span><a href="https://beian.miit.gov.cn/">苏ICP备10208522号 <span></span></a>|<img alt="" src="../../assets/njkydimages/image/beian.png">公安机关备案号：32011502010301<span>|</span><a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action">工业和信息化部</a>
    <!-- <span>|</span>Powered by <a href="http://www.njkyd.com">南京科翼达信息科技有限公司</a> -->
</p>
</div>
</div>
</div>
</template>
<script >
 
 import homeapi from '@/api/api.js'
import until from '@/api/until'
 import QRCode from 'qrcode'
 import userImg from '@/assets/imgs/ai_logo.jpg'
    export default {
        name: 'login',
        data(){
            return{
                phone:"",
                haveCheck:false,
                code:"",
                title:"",
                loginType:1,
                loginCode:1,
                imgs:[
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0406210Z024%2F2104060Z024-11-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050452&t=a8eeec2f6f7b4aff883b85ee2276ea4d",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668047974&t=0545a1395151b9e52e3ae13d4c1f3a9d",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F033021091503%2F210330091503-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050510&t=b07c3793fe21bd8cb17e2490a11b664d",
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050503&t=63bbb5a9c3ac56b66f20240b63e98f34",

                ],
                showLoginCode:false,
                time:0,
                msg:"",
                isVerify:false,
                successSlide:false,
                loading:false,
                timeOut:null,
                showSelectUser:false,

                selectForm:{
                    id:"",
                    type:"",
                },
                roleList:[],
                userImg:userImg


            }
        },
        components: {
            
        },
        mounted(){
            let title=this.$route.query.title
            until.setCookie("loginType",2)
            if(title){
                this.title=title
            }
            else{
                this.title="手机号注册"
            }
        },
        watch:{
            loginCode(){
                if(this.loginCode==2){
                    this.getLoginCode();
                }
            }
        },
        methods:{
            selectRole(item){
                this.selectForm={
                    id:item.id,
                    type:item.type
                }
            },

            //确认登录
            async sureLogin(){
                let form=this.selectForm
                let data=await homeapi.confirmRole(form);
                if(data.code==200){

                    until.setCookie("token",data.result)
                    this.getUserInfo();
             
                }
            },


            //获取登录二维码
			async getLoginCode(){
				let type=this.loginType;
				let data=await homeapi.getLoginCode({type})
				if(data.code==200){
					this.imageSrc=data.result.qrCodeUrl
					this.qrCodeId=data.result.qrCodeId
					this.generateQRCode();
					this.getCodeResult();
				}
			},
			generateQRCode() {
				const canvas = this.$refs.qrCodeCanvas;
				QRCode.toCanvas(canvas, this.imageSrc, {
					width: 400, // 设置二维码的宽度
					height:400,
					margin: 1, // 设置二维码周围的空白边距
				}, (error) => {
					if (error) console.error(error)
					console.log('QR Code generated');
				});
			},
			//获取扫码登录结果
			async getCodeResult(){

                if(this.timeOut){
                    clearTimeout(this.timeOut)
                }
				let qrCodeId=this.qrCodeId
				let data=await homeapi.getCodeResult({qrCodeId})
				if(data.code==200){
					if(data.result.token){
						until.setCookie("token",data.result.token)
                        this.getLoginUserList();
						// this.getUserInfo();
					}	
					else{
						this.timeOut=setTimeout(() => {
							this.getCodeResult();
						}, 2000);
					}
				}
			},


            onSuccess() {
                this.msg = "验证成功！";
                this.isVerify=true;
                this.successSlide=true
                setTimeout(()=>{
                    this.onRefresh();
                  
                    this.sendCode();
                    this.showLoginCode=false;
                },1000)
                
               
            },


            async Login(){
                let code=this.code
                let phone=this.phone;
                let type=this.loginType
                let data=await homeapi.loginWithPc({code,phone,type});
                if(data.code==200){
                    until.setCookie("token",data.result)
                    this.getLoginUserList();
                    // this.getUserInfo();
             
                }
                else{
                    this.$message.error(data.message)
                }
            },

            //获取登录的账号
            async getLoginUserList(){
                let data=await homeapi.getLoginUserList();
                if(data.code==200){
                    if(data.result && data.result.length>0){
                        const roleList= data.result
                        if(roleList.length==0){
                            this.$message.error("请先注册")
                        }
                        else{
                            if(roleList.length==1){
                                this.selectRole(roleList[0])
                                this.sureLogin();
                            }
                            else{
                                this.roleList=roleList
                                this.showSelectUser=true;
                            }
                           
                        }
                    }
                    else{
                        this.$message.error("请先注册")
                    }
                    
                }
            },


            onFail() {
                this.msg = "验证失败，请重新验证！";
                this.isVerify=true;
                this.successSlide=false
                setTimeout(() => {
                    this.onRefresh();
                }, 1000);
            },
            onRefresh() {
                this.msg = "";
                this.isVerify=false;
                this.$refs["slideverify"].refresh();
            },
            beginTime(){
                if(this.time>0){
                    this.time=this.time-1;
                    setTimeout(()=>{
                        this.beginTime();
                    },1000)
                }
            },

            setActive(type){
                this.loginType=type;
                until.setCookie("loginType",type)

                if(this.loginCode==2){
                    this.getLoginCode();
                }
                
            },
            async sendCode(){
                let phone=this.phone
                if(phone.length!=11){
                    this.$message.error("请传入正确的手机号")
                    return false;
                }
                this.loading=true;
                let data=await homeapi.sendCode({phone});
                if(data.code==200){
                    this.loading=false
                    this.time=60;
                    this.beginTime();
                }
                else{
                    this.loading=false
                   this.$message.error(data.message)
                }
            },
        
            async toRegister(){
               
                this.$router.push("/login/register")
            },

            async getUserInfo(){
				let data=await homeapi.getUserinfo();
				if(data.code==402){
					this.$message.error("请先注册账号")
                    until.setCookie("token","")
				}
				if(data.code==403){
                    this.$message.error("请先注册账号")
                    until.setCookie("token","")
					
				}
				if(data.code==200){
                    this.$root.userInfo=data.result
                    if(data.result.type==1){


                        this.$router.push("/")
                    }
                    else{
                        this.$router.push("/user/index")
                    }
				}
				
			}
         

        }
    }

</script>

<style scoped lang="less">
    .tdimcode{
        text-align: right;
    }
    .footer{
        position: relative;
    }
    .btn_list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn_div{
        width: 124px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #FC7B24;
        cursor: pointer;
    }
    .btn_div:last-child{
        margin-left: 16px;
    }
    .select_div{
        background: #FC7B24;
        color: #FFFFFF;
    }
    .carousel{
        margin-bottom: 0px;
    }
    .carousel-indicators li{
        margin-left: 10px;
    }
    .carousel-indicators li:first-child{
        margin-left: 0px;
    }
    .navbar-header{
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .navbar-header span{
        font-size: 24px;
        color: #FC7B24;
        font-weight: bold;
    }
    .form-signin{
        position: relative;
    }
    .form-signin i{
        font-size: 40px;
        color: #FFFFFF;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 40px;
        cursor: pointer;
    }
    .code_div{
        width: 172px;
        height: 172px;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .send_btn{
        width: 90px;
        height: 40px;
        background: #FC7B24;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 10px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    .send_btn_next{
        width: 90px;
        height: 40px;
        background: #e6e6e6;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333333;
        margin-left: 10px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    .form-group{
        position: relative;
    }
    .box_slide_verify{
        position: fixed;
        width: 450px;
        height: 360px;
        background: #FFFFFF;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 9999;
        margin-top: 280px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .bsv_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        font-size: 20px;
        font-weight: bold;
        color: #666666;
        border-bottom: 1px solid #e6e6e6;
        padding: 0 30px;
        
        box-sizing: border-box;
    }
    .bsv_head i{
        font-size: 28px;
        color: #999999;
        cursor: pointer;
    }
    .checkbox{
        margin-top: 40px;
    }
    .boxsv_div{
        width:390px;
        position: relative;
        margin-left: 30px;
        margin-top: 15px;
    }
    .verify{
        height: 60px;
        border: 1px solid #52ccba;
        background-color: #d2f4ef;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #52ccba;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 16px;
        font-weight: bold;
    }
    .isError{
        border: 1px solid #cc5252;
        background-color: #f4d2d2;
        color: #cc5252;
    }
    .muban_dialog{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    .rolelist{
        width: 100%;
        display: inline-block;
        padding: 0 15px;
        box-sizing: border-box;
        min-height: 200px;
        max-height: 200px;
        overflow-y: auto;
    }
    .role_div{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 15px;
        box-sizing: border-box;
        margin-top: 15px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
    }
    .role_div:hover{
        border: 1px solid #FC7B24;
    }
    .rd_left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .rd_img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
    }
    .rd_img img{
        width: 100%;
        height: 100%;
    }
    .rd_name{
        flex: 1;
        margin-left: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        line-height: 25px;
    }
    .rd_right i{
        color: #FC7B24;
        font-size: 24px;
    }
    .select_role_div{
        border: 1px solid #FC7B24;
    }
    .role_bottom{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .roled_btn{
        width: 100px;
        height: 45px;
        background: #FC7B24;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

